import React, { useEffect } from 'react';
import { Layout, Dropdown, Menu, Input, Form, message } from 'antd';
import TopMenu from './TopMenu/index';
import { UserOutlined } from '@ant-design/icons';
import useRouter from 'components/hooks/useRouter';
import useLocalStorage from 'components/hooks/useLocalStorage';
import { logout } from 'api/Login';
import Modal from 'antd/lib/modal/Modal';
import { useToggle } from 'ahooks';
import { updatePasswordApi } from 'api/User';
const { Header, Content } = Layout;

const LayoutPage = (props: any) => {
    const router = useRouter();
    const [userName] = useLocalStorage('userName', '');
    const [visible, { toggle: toggleVisible }] = useToggle(false);
    const [form] = Form.useForm()
    const onClick = (e: any) => {
        if (e.key === 'logout') {
            logout().then(() => {
                router.push('/login');
            });
        } else if (e.key === 'changePwd') {
            form.resetFields()
            toggleVisible();
        }
    };
    useEffect(() => {
        if (router.pathname === '/') {
            router.push('/home');
        }
    }, []);
    const onOk = async () => {
        await updatePasswordApi(form.getFieldsValue())
        message.success('修改密码成功')
        toggleVisible()
    };
    const onCancel = () => {
        toggleVisible()
    };
    return (
        <Layout className="layout">
            <Header
                className="flex-between"
                style={{ position: 'fixed', zIndex: 1, width: '100%', backgroundColor: '#fff', paddingLeft: 0 }}
            >
                <div className="flex">
                    <img style={{ height: 66 }} src={require('assets/imgs/logo.png')} alt="" />
                    <TopMenu></TopMenu>
                </div>
                <Dropdown
                    overlay={() => (
                        <Menu onClick={onClick}>
                            <Menu.Item key="changePwd">修改密码</Menu.Item>
                            <Menu.Item key="logout">退出登录</Menu.Item>
                        </Menu>
                    )}
                >
                    <span className="pointer">
                        <span className="mr10">{userName}</span>
                        <UserOutlined />
                    </span>
                </Dropdown>
            </Header>
            <Content style={{ marginTop: 64 }}>{props.children}</Content>
            {/* <Footer className="text-center">{new Date().getTime()}</Footer> */}
            <Modal
                visible={visible}
                title="修改密码"
                okText="确定"
                cancelText="取消"
                onOk={onOk}
                onCancel={onCancel}
            >
                <Form form={form}>
                    <Form.Item label="原密码" name="password">
                        <Input placeholder="请输入原密码" />
                    </Form.Item>
                    <Form.Item label="新密码" name="newPassword">
                        <Input placeholder="请输入新密码" />
                    </Form.Item>
                </Form>
            </Modal>
        </Layout>
    );
};
export default LayoutPage;
